<template>
    <require from="./chat.css"></require>
    <div ref="chatContainerRef" class="tms-chat ${isLeftBarHide ? 'hide-bar' : ''}">
        <em-chat-top-menu users.bind="users" chat-user.bind="user" login-user.bind="loginUser" channels.bind="channels" channel.bind="channel" login-user.bind="loginUser" chat-id.bind="chatId" chat-to.bind="chatTo" is-at.bind="isAt" onlines.bind="onlines"></em-chat-top-menu>
        <em-chat-sidebar-left users.bind="users" login-user.bind="loginUser" channels.bind="channels" chat-to.bind="chatTo" is-at.bind="isAt" onlines.bind="onlines"></em-chat-sidebar-left>
        <div ref="contentRef" class="tms-content ${isRightSidebarShow ? 'tms-sidebar-show' : ''}">
            <div click.delegate="dimmerHandler()" class="ui inverted dimmer"></div>
            <div ref="contentBodyRef" class="tms-content-body">
                <div ref="scrollbarRef" class="tms-comments-container" scrollbar>
                    <div ref="commentsRef" class="ui basic segment minimal selection list segment comments">
                        <div if.bind="!last && !_filter" click.delegate="lastMoreHandler()" class="basic ui button tms-pre-more ${lastMoreP && lastMoreP.readyState != 4 ? 'tms-disabled2' : ''}"><i show.bind="lastMoreP && lastMoreP.readyState != 4" class="spinner loading icon"></i> 加载更多(${lastCnt})</div>
                        <em-chat-content-item chat-to.bind="chatTo" mark-id.bind="markId" channel.bind="channel" is-at.bind="isAt" chats.bind="chats" login-user.bind="loginUser"></em-chat-content-item>
                        <div if.bind="!first && !_filter" click.delegate="firstMoreHandler()" class="basic ui button tms-next-more ${nextMoreP && nextMoreP.readyState != 4 ? 'tms-disabled2' : ''}"><i show.bind="nextMoreP && nextMoreP.readyState != 4" class="spinner loading icon"></i> 加载更多(${firstCnt})
                            <div click.trigger="refreshLatestHandler($event)" title="刷新最新消息" class="ui basic circular mini icon button">
                                <i class="refresh icon"></i>
                            </div>
                        </div>
                    </div>
                    <div show.bind="isShowHead" title="滚至头部(alt+↑)" class="tms-go tms-go-head">
                        <div click.delegate="goHeadHandler()" class="circular ui icon button"><i class="chevron up icon"></i></div>
                    </div>
                    <div show.bind="isShowFoot" title="滚至尾部(alt+↓)" class="tms-go tms-go-foot">
                        <div click.delegate="goFootHandler()" class="circular ui icon button"><i class="chevron down icon"></i></div>
                    </div>
                </div>
                <em-chat-input channel.bind="channel" is-at.bind="isAt" chat-to.bind="chatTo" em-chat-input.ref="emChatInputRef"></em-chat-input>
                <div ref="filterRef" title="按消息关联人过滤" class="ui bottom left pointing dropdown circular icon tiny button tms-msg-filter ${channel._filterd ? 'filterd' : ''}" task.bind="initFilterHandler(filterRef)">
                    <i class="filter icon"></i>
                    <i class="red link remove large icon" title="清除过滤条件" click.delegate="clearFilterHandler()"></i>
                    <div class="menu">
                        <div class="ui icon search input">
                            <i class="search icon"></i>
                            <input type="text" placeholder="过滤查找...">
                        </div>
                        <div class="divider"></div>
                        <div class="header">按消息关联人过滤</div>
                        <div class="scrolling menu">
                            <div class="item" data-value="all">全员</div>
                            <template repeat.for="item of channel.members">
                                <div if.bind="item.enabled" class="item" data-value="${item.username}">
                                    ${item.name ? item.name : item.username}
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <em-chat-sidebar-right login-user.bind="loginUser" channel.bind="channel" login-user.bind="loginUser" is-at.bind="isAt"></em-chat-sidebar-right>
        </div>
    </div>
    <div css="width: ${progressWidth}px;" class="tms-chat-progress"></div>
    <em-chat-msg-popup channel.bind="channel"></em-chat-msg-popup>
    <em-chat-member-popup></em-chat-member-popup>
    <em-chat-settings bar-hide.bind="isLeftBarHide"></em-chat-settings>
</template>
